/* page */
article{
  .vflex;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 100%;
  min-height: 100%;
  overflow: hidden;
  background-color: @main-bg-color;
  & > section{
    .flex-weight;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  & > header{
    background-color: @theme-color1;
    min-height: 2.75rem;
    width: 100%;
    position: relative;
    padding: 0 3.5rem;
    h1{
      .u(2.75rem);
      font-size: 1.125rem;
      color: @white87;
      .text-center;
    }
    a{
      color: @white87;
      &.icon-button{
        display: block;
        min-width: 3.5rem;
        min-height: 2.75rem;
        padding: 0 1rem;
        line-height: 2.75rem;
        color: @white87;
        position: absolute;
        top: 0;
        &.left{
          left: 0;
        }
        &.right{
          right: 0;
        }
        .icon{
          font-size: 1.125rem;
          width: 1.5rem;
          height: 1.5rem;
          line-height: 1.5rem;
          text-align: center;
          overflow: hidden;
          .valign;
        }
      }
    }
  }
}
/*progress-bar*/
.progress-bar {
  height: 0.5rem;
  background-color: #eee;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24) inset;
}
.progress-bar-inner{
  background: @theme-color1;
  height: 100%;
  line-height: inherit;
  .text-right;
  color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28) inset;
}
/* steps */
.steps {
  background: #fff;
  li{
    position: relative;
    min-height: 4rem;
    padding: 1rem 0 1rem 2.5rem;
    & > *{
      display: block;
      font-size: .75rem;
    }
    &:before{
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -8px;
      box-sizing: border-box;
      text-align: center;
      border-radius: 50%;
      background-color: #fff;
      color: @theme-color1;
      font-family: "icomoon";
      font-size: 2rem;
      z-index: 1;
    }
    &:after{
      content: "";
      position: absolute;
      left: 15px;
      top: -50%;
      width: 4px;
      height: 100%;
      border-left: 2px dotted @theme-color1;
      box-sizing: border-box;
    }
    &:first-child:after {
      display: none;
    }
  }
}
/* tabs */
.tabs {
  .flex;
  background: #fff;
  border-bottom: 1px solid @border-color;
  & > a{
    .flex-weight;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    line-height: 3rem;
    height: 3rem;
    border-bottom: 3px solid transparent;
    &.active{
      color: @theme-color2;
      border-bottom: 3px solid @theme-color2;
    }
  }
}
/* mask */
.mask{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: @black10;
  z-index: 99;
  display: none;
}
/* dialog */
.dialog{
  .valign;
  .radius;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  background-color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.26);
  z-index: 100;
  width: 80%;
  header{
    position: relative;
    height: 3rem;
    line-height: 3rem;
    border-bottom: 1px solid @theme-color1;
    & > h3{
      font-size: 1.125rem;
    }
    .icon{
      .valign-right;
      font-size: 1.5rem;
      right: 1rem;
      color: @theme-color1;
    }
  }
  section {
    margin: .5rem 1rem;
    input, textarea{
      padding: .5rem;
      width: 100%;
    }
  }
  footer {
    margin-bottom: 1rem;
    text-align: right;
    padding: 0 1rem;
    a{
      display: inline-block;
      padding: .5rem;
      &.ok{
        color: @theme-color1;
      }
    }
  }
}
